import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import {
    Press,
    Button
} from '../../../../components/index';

import * as Const from '../../../../const/index';

interface Props {
    showPre:boolean,
    disabled:boolean,
    prePress:Function,
    nextPress:Function,
    okText:string,
}

class Footer extends PureComponent<Props> {

    static defaultProps = {
        showPre:false,
        disabled:false,
        okText:`Continue`,
        nextPress:() => null,
        prePress:() => null
    }

    render() {
        const {
            okText,
            showPre,
            prePress,
            disabled,
            nextPress
        } = this.props;

        return (
            <View style={styles.container}>
                <View style={styles.preContainer}>
                    {!!showPre && (
                        <Press
                            onPress={prePress}
                            style={styles.preButton}
                        >
                            <Text style={styles.preText}>
                                Previous
                            </Text>
                        </Press>
                    )}
                </View>
                <Button
                    title={okText}
                    disabled={disabled}
                    onPress={nextPress}
                    style={styles.nextButton}
                />
            </View>
        )
    }
}

export default Footer;

const styles = StyleSheet.create({
    container:{
        flexDirection:`row`,
        paddingTop:40,
        paddingBottom:60
    },
    preContainer:{
        flex:1,
        height:50,
        marginRight:20
    },
    preButton:{
        flex:1,
        borderWidth:1,
        alignItems:`center`,
        justifyContent:`center`,
        borderColor:`#fff`,
        backgroundColor:`#fff`
    },
    nextButton:{
        flex:1
    },
    preText:{
        fontSize:16,
        color:`#999`,
        fontFamily:Const.fontFamily
    }
}) as any;